<!--
 * @Author: liaoxing
 * @Date: 2022-03-21 15:10:51
 * @LastEditors: liaoxing
 * @LastEditTime: 2022-03-22 10:41:09
 * @Description: liaoxing created
 * @FilePath: \pin-xin-admin\src\components\selectMember\index.vue
-->
<template>
  <div class="selectMember" v-loading="loading">
    <el-input
      placeholder="请输入搜索姓名"
      v-model="params.name_like"
      clearable
      size="mini"
      style="margin-bottom: 10px"
      @input="debounceEvent">
    </el-input>
    <ul v-if="memberList.length" infinite-scroll-disabled="disabled" ref="infiniteList" class="infinite-list" v-infinite-scroll="loadMemberList" style="overflow:auto">
      <li v-for="(item, index) in memberList" class="infinite-list-item" :key="item.name + index">
        <el-checkbox v-model="item.jstarSelect" @change="selectItem($event, item)">{{ item.name + ' - ' + (showPhone ? item.mobile : '') }}</el-checkbox>
      </li>
      <li v-if="memberList.length && disabled" class="flex-center color-blue">
        到底喽！
      </li>
    </ul>
    <div v-else class="flex-center" style="height: 320px;width: 100%">
      <el-empty description="列表空空如也！"></el-empty>
    </div>
    <el-button v-if="showConfirm" type="primary" size="mini" style="margin-top: 10px; float: right" @click="confirmSelect">确 定</el-button>
  </div>
</template>

<script>
import debounce from '@/utils/debounce'
export default {
  name: "selectMember",
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    ps: {
      type: Number,
      default: 50
    },
    selectMemberList: {
      type: Array,
      default: () => []
    },
    showConfirm: {
      type: Boolean,
      default: true
    },
    showPhone: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      memberList: [],
      loading: false,
      params: {
        ps: 0,
        pn: 1,
        name_like: ''
      },
      selectMember: [],
      debounceEvent: null, // 防抖事件
      disabled: false
    }
  },
  created () {
    this.params.ps = this.ps
    if (this.selectMemberList.length) {
      this.selectMember = this.selectMemberList
    }

    this.$emit("update:selectMemberList", this.selectMember)

    this.getMemberTree()
    this.debounceEvent = debounce(() => {
      this.searchMember()
    }, 500)
  },
  methods: {
    /* 获取人员列表 */
    getMemberTree () {
      this.loading = true
      let params = JSON.parse(JSON.stringify(this.params))
      if (!params.name_like) {
        delete params.name_like
      }
      this.$report
        .memberList(params)
        .then((res) => {
          if (res.code === 200) {
            this.loading = false
            if (!res.data.rows.length) {
              this.disabled = true
              return
            }
            res.data.rows.forEach(element => {
              if (this.selectMember.length) {
                const have = this.selectMember.find(item => item.id === element.id)
                if (have) {
                  element.jstarSelect = true
                } else {
                  element.jstarSelect = false
                }
              } else {
                element.jstarSelect = false
              }
              
            })
            if (this.params.pn == 1) {
              this.memberList = res.data.rows
            } else {
              this.memberList = this.memberList.concat(res.data.rows)
            }
          } else {
            this.$message.error(res.code + '-' + res.msg)
          }
        })
        .catch((e) => {
          this.$message.error(e.toString())
        })
    },
    /* 搜索 */
    searchMember () {
      this.$refs.infiniteList.scrollTop = 0
      this.disabled = false
      this.pn = 1
      this.getMemberTree()
    },
    /* 无限加载 */
    loadMemberList () {
      this.params.pn++
      this.getMemberTree()
    },
    /* 选中或者取消 */
    selectItem (type, item) {
      if (type) {
        if (!this.multiple) {
          if (this.selectMember.length) {
            this.selectMember[0].jstarSelect = false
          }
          this.$set(this.selectMember, 0, item)
        } else {
          this.selectMember.push(item)
        }
      } else {
        const idx = this.selectMember.findIndex(it => it.id == item.id)
        this.selectMember.splice(idx, 1)
      }
    },
    /* 确认选择 */
    confirmSelect () {
      this.$emit('getSelectMemberList', this.selectMember)
    },
    /* 清空选择 */
    clearSelect () {
      this.selectMember.forEach(item => {
        item.jstarSelect = false
      })
      this.selectMember = []
    }
  }
}
</script>

<style lang="less">
.selectMember{
  height: 400px;
  width: 260px;
  .infinite-list{
    height: 320px;
    width: 100%;
    overflow: auto;
    padding: 0;
    margin: 0;
    li{
      list-style: none;
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      &:hover{
        background-color: #48a3ff2d;
      }
    }
  }
}
</style>